<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .actived {
            color: red;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-for="item in arr" :key="item.id">
            <h1>{{item}}</h1>
        </div>
        <button @click="aaa">点击变成第二个图的样子</button>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: [
                    {
                        id: 1,
                        fruit: "苹果",
                    },
                    {
                        id: 2,
                        fruit: "香蕉",
                    },
                    {
                        id: 3,
                        fruit: "橙子",
                    },
                ],
                arr2: [

                ]
            },
            methods: {
                aaa() {
                    //这一步是常规方法  先试试这个   大多数程序员想到的

                    this.arr[1].color = '黄色香蕉'
                    console.log(this.arr)

                    //第一种方法   $forceUpdate() 
                    // this.$forceUpdate() 
                    // 第二种方法 Vue.set  官方提供的 响应API 
                    // Vue.set(this.arr,1,{
                    //     id: 2,
                    //   fruit: "香蕉",
                    //   color:'黄色香蕉'
                    // })

                    // 第三种方法 
                    // push()
                    // pop()
                    // shift()
                    // unshift()
                    // splice()
                    // sort()
                    // reverse()
                    // 用这七种数组方法改变数组 不会出现任何 数据响应的问题 
                    let obj = this.arr[1]
                    obj.color ='黄色香蕉' 
                    this.arr.splice(1,1,obj)   



                },
            },
        });
        console.log(app);
    </script>
</body>

</html>